<template>
  <div class="newsclspage">
    <div class="actionBar">
      <div>
        条目列表：共<span>{{total}}</span>条
      </div>
      <div>
        <div class="build" v-show="this.tableData"><router-link :to = "{path: '/newsForm/' + this.curClsid, params: {'clsid': this.$route.params.id }}">+新增</router-link></div>
        <el-dialog :visible.sync="dialogBuild"
                  size="tiny">
          <el-form label-width="100px" id="form1">
          <el-form-item label="栏目图">
            <input type="file" name="file" ref="file" @change="getFile($event)"/>
          </el-form-item>
          <el-form-item label="标题">
            <el-input v-model="formData.title" name="title"></el-input>
          </el-form-item>
          <el-form-item label="上线时间">
            <el-date-picker v-model="formData.publish_time"
                            type="datetime"
                            placeholder="选择上线时间"
                            align="right"
                            name="publish_time">
            </el-date-picker>
          </el-form-item>
          <el-form-item label="下线时间">
            <el-date-picker v-model="formData.expire_time"
                            type="datetime"
                            placeholder="选择下线时间"
                            align="right"
                            name="expire_time">
            </el-date-picker>
          </el-form-item>
          <el-form-item label="跳转链接">
            <el-input v-model="formData.jump_url" name="jump_url"></el-input>
          </el-form-item>
          <input type="hidden" name="token" v-model="formData.token">
          <el-button type="primary" @click="colSubmit">提交</el-button>
        </el-form>
        </el-dialog>
      </div>
    </div>
    <table class="table newscls">
      <thead>
        <tr>
          <th>封面图</th>
          <th>标题</th>
          <th>阅读</th>
          <th>点赞</th>
          <th>评论</th>
          <th>状态</th>
          <th>发布时间</th>
          <th>最后修改时间</th>
          <th>操作</th>
        </tr>
      </thead>
      <tbody>
        <tr v-for="(item, index) in tableData">
          <td><img :src="item.infoMainImg"></td>
          <td><p class="tl">{{item.infoTitle}}</p></td>
          <td>{{item.readCount}}</td>
          <td>{{item.goodCount}}</td>
          <td>{{item.commentCount}}</td>
          <td>{{item.publishStatus}}</td>
          <td>{{item.publishTime}}</td>
          <td>{{item.updateTime}}</td>
          <td>
            <el-button :plain="true" type="danger" @click="settop(item.infoId, index)" size="small" v-show="!item.topRank">置顶</el-button>
            <el-button :plain="true" type="danger" @click="resettop(item.infoId, index)" size="small" v-show="item.topRank">取消置顶</el-button>
            <el-badge :value="item.commentCount" class="item" :max="99">
              <el-button size="small">留言</el-button>
            </el-badge>
            
            <el-button :plain="true" type="warning"  size="small"><router-link :to="{ path: '/newsForm/' + item.clsId + '/' + item.infoId, params: {clsid:item.clsId,  articleid: item.infoId }}">修改</router-link></el-button>
            <el-button :plain="true" type="danger" @click="deletearticle(item.infoId, index)" size="small">删除</el-button>
          </td>
        </tr>
      </tbody>
    </table>
    <div class="navigation">
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="currentPage"
        :page-sizes="[20, 30, 50]"
        :page-size="this.pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="this.total">
      </el-pagination>
    </div>
  </div>
</template>
<script>
  // import axios from 'axios'
  export default{
    name: 'newsInstallPage',
    data () {
      return {
        total: 0,
        tableData: [],
        dialogBuild: false,
        form_token: '',
        formData: {
          file: '',
          title: '',
          publish_time: '',
          expire_time: '',
          jump_url: '',
          id: ''
        },
        currentPage: 1,
        pageSize: 5

      }
    },
    props: {
      curClsid: {
        type: String
      }
    },
    beforeCreate () {
      this.$store.commit('CHANGESTATECOL', [0, 1])
      this.$store.commit('CHANGESTATE', [1, 0, 0, 0, 0, 0])
    },
    created () {
      // console.log(this.$route)
      var clsid = this.$route.params.id
      this.axios(clsid, 1, this.pageSize)
      console.log(this.tableData)
    },
    methods: {
      // 加载页面
      axios (clsid, index, pagesize) {
        console.log(clsid)
        if (index === undefined) {
          index = 1
        }
        this.$axios({
          url: this.$store.state.baseURI + '/oss/info/list',
          method: 'get',
          params: {
            cls_id: clsid,
            page_num: index,
            page_size: this.pageSize,
            token: this.$store.state.token
          }
        }).then(obj => {
          console.log(obj)
          if (obj.data.code === 100) {
            this.total = obj.data.data.total
            this.tableData = obj.data.data.list
          } else {
            this.$router.push('/')
          }
        })
      },
      // 新建
      colBuild () {
        this.dialogBuild = true
        this.getFormToken()
      },
      colSubmit () {
        var formData = new FormData()
        formData.append('token', this.$store.state.token)
        formData.append('form_token', this.form_token)
        formData.append('title', this.formData.clsName)
        formData.append('file', this.formData.file)
        formData.append('show_index', this.formData.clsName)
        formData.append('index_limit', this.formData.indexLimit)
        formData.append('cls_id', this.formData.clsId)
      },
      // 删除栏目
      deletearticle (id, index) {
        this.$axios({
          url: process.env.API_ROOT + 'oss/info/delete',
          method: 'post',
          params: {
            id: id,
            token: this.$store.state.token
          }
        }).then(obj => {
          this.tableData.splice(index, 1)
          console.log(obj)
        })
      },
      verarticle (clsid, id) {
      },
      handleSizeChange (pageSize) {
        console.log(`每页 ${pageSize} 条`)
        this.pageSize = pageSize
        this.axios(this.$route.params.id, this.currentPage, pageSize)
      },
      handleCurrentChange (currentPage) {
        console.log(`当前页: ${currentPage}`)
        this.axios(this.$route.params.id, currentPage, this.pageSize)
      },
      settop (id, index) {
        this.$axios({
          method: 'post',
          url: process.env.API_ROOT + 'oss/info/set/top',
          params: {
            id: id,
            token: this.$store.state.token
          }
        }).then(obj => {
          if (obj.data.code === 100) {
            console.log(1)
            this.tableData[index].topRank = 1
          }
        })
      },
      resettop (id, index) {
        this.$axios({
          method: 'post',
          url: process.env.API_ROOT + '/oss/info/reset/top',
          params: {
            id: id,
            token: this.$store.state.token
          }
        }).then(obj => {
          if (obj.data.code === 100) {
            console.log(2)
            this.tableData[index].topRank = 0
          }
        })
      }
    },
    watch: {
      '$route' (to, from) {
        var clsid = this.$route.params.id
        this.axios(clsid, 1, this.pageSize)
      }
    }
  }
</script>
<style lang="scss" rel="stylesheet/scss">
.newsclspage{
  overflow: hidden;

    .newscls{
      tbody {
        tr{
          
        }
      }
      td {
         img{
          width: 197px;
          height: 110px;
        }
        p.tl{
          text-align:left;
        }

        .el-button{
          margin-left:10px;
          a{
            color:#1f2d3d
          }
        }
        .el-badge{
          .el-button{
            margin-left: 0;
          }
          margin-left: 10px;
        }
      }
      
    }
    .navigation{
      margin: 20px 0;
      float: right
    }
}
</style>
